<template>
  <div>
<!--    <h1>{{name}}</h1>-->
<!--    <h1>{{age}}</h1>-->
    <h2>{{Person.name}}</h2>
    <h2>{{Person.age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<style scoped>
  h1 {
    background-color: bisque;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
  }
</style>

<script setup lang="ts">
// 数据部分
import {reactive, ref, toRefs} from "vue";

// 如果属性特别多，我们不可能一个一个的去写出来，肯定是封装成一个对象
// let name = ref('张三')
// let age = ref(18)

let Person = reactive({
  name: "张三",
  age: 18
})

// 如果此时我想单独拿出来值呢?
// let {name, age} = Person
let {name, age} = toRefs(Person) // 转变完成
// 上述方式称为解构赋值，通过这种方式可以拿到对象内部的值
// 但如果想要修改新值，从而影响旧值的话，就需要使用 toRef 或 toRefs 来封装内部变量
// 简单理解的话，就是新创建出来的变量并不是响应式的数据，而如果想要其变为响应式的数据，
// 就需要使用 toRef 或 toRefs 封装内部的变量


// 方法部分
function changeName() {
  // name.value = 'zhang-san'
  // Person.name = 'zhang-san'
  name.value = 'zhang-san'
}

function changeAge() {
  // age.value += 1
  // Person.age += 1
  age.value += 1
}
</script>
